<template>
    <div id="earlyWarning">
        <el-row>
            <!--左侧部分 -->
            <!--人员预警 -->
            <el-col :span="8" id = "left" style="left: 0px;">
              <el-row>
                <el-col :span="24">
                    <div class = "chart_left chart_main" style="height: 28vh;">
                        <el-row>
                            <el-col :span="24">
                                <el-row>
                                    <el-col :span="1" style="width: 1.2vw">
                                        <div class = "block"></div>
                                    </el-col>
                                    <el-col :span="22">
                                        <div class = "title">预约人员预警</div>
                                    </el-col>
                                </el-row>
                            </el-col>
                             <el-row>
                                <el-col :span="6">
                                  <div class="peplTaotal"> 人数总量 </div>
                                </el-col>
                                <el-col :span="6">
                                  <div class="loadBearing"> 最大承载 <span>30</span> 万 </div>
                                </el-col>
                                <el-col :span="6">
                                  <div class="peplTaotal"> 普通观众 </div>
                                </el-col>
                                <el-col :span="6">
                                  <div class="loadBearing"> 最大承载 <span>18</span> 万 </div>
                                </el-col>
                             </el-row>
                            <el-col :span="24">
                                <el-row>
                                    <el-col :span="6">
                                        <div id = "chart1_1" class = "chart" style="height: 9vh;width:16vh;display:inline-block;"></div>
                                    </el-col>
                                    <el-col :span="6">
                                      <div class="curDate">
                                        <p>当日预约 <span>25</span> 万</p>
                                        <p>实际到达 <span>20</span> 万</p>
                                      </div>
                                    </el-col>
                                    <el-col :span="6">
                                        <div id = "chart1_2" class = "chart" style="height: 9vh;width:16vh;display:inline-block;"></div>
                                    </el-col>
                                    <el-col :span="6">
                                      <div class="curDate">
                                        <p>当日预约 <span>25</span> 万</p>
                                        <p>实际到达 <span>20</span> 万</p>
                                      </div>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="24">
                                <div class="chart1Text">
                                  <p>
                                      <span></span>
                                      <span>实际到达率</span>
                                      <span>70%</span>
                                      <span>以下</span>
                                  </p>
                                  <p>
                                      <span></span>
                                      <span>实际到达率</span>
                                      <span>5%~15%</span>
                                      <span></span>
                                  </p>
                                  <p>
                                      <span></span>
                                      <span>实际到达率</span>
                                      <span>超过15%</span>
                                      <span>以上</span>
                                  </p>
                              </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
                <!--预约出行方式 -->
                <el-col :span="24">
                  <div class = "chart_right chart_main" style="height: 39vh;">
                    <el-row>
                        <el-col :span="1" style="width: 1.2vw">
                          <div class = "block"></div>
                        </el-col>
                        <el-col :span="14">
                          <div class = "title">预约出行方式</div>
                        </el-col>
                        <el-col :span="8">
                          <div class="chart2Text">
                            <p >
                                <span></span>
                                <span>已入场</span>
                            </p>
                            <p>
                                <span></span>
                                <span>预约参展</span>
                            </p>
                          </div>
                        </el-col>
                        <el-col :span="24">
                            <el-row>
                                <el-col :span="24">
                                    <div  id = "chart2" class = "chart" style="height: 20vh;"></div>
                                </el-col>
                            </el-row>
                        </el-col>
                        <!--偏差率 -->
                        <el-col :span="24">
                          <el-row>
                            <el-col :span="3">
                              <div class="deviationRate">偏差率</div>
                            </el-col>
                            <el-row>
                              <el-col :span="24">
                                <div class="rateContentBox">
                                  <div class="rateContent">
                                    <img src="../../static/img/guidao.png" alt="">
                                    <span>轨道</span>
                                    <span class="colorGreen">9%</span>
                                  </div>
                                  <div class="rateContent">
                                    <img src="../../static/img/bus.png" alt="">
                                    <span>公交</span>
                                    <span class="colorYellow">16%</span>
                                  </div>
                                  <div class="rateContent">
                                    <img src="../../static/img/car.png" alt="">
                                    <span>出租</span>
                                    <span class="colorGreen">8%</span>
                                  </div>
                                  <div class="rateContent">
                                    <img src="../../static/img/car.png" alt="">
                                    <span>出租</span>
                                    <span  class="colorYellow">19%</span>
                                  </div>
                                  <div class="rateContent">
                                    <img src="../../static/img/other.png" alt="">
                                    <span>其他</span>
                                    <span  class="colorRed">60%</span>
                                  </div>
                                </div>
                              </el-col>
                            </el-row>
                          </el-row>
                        </el-col>
                    </el-row>
                  </div>
                </el-col>
                <!--剩余停车位预警 -->
                <el-col :span="24">
                  <div class = "chart_right chart_main" style="height: 23vh;">
                    <el-row>
                        <el-col :span="1" style="width: 1.2vw">
                          <div class = "block"></div>
                        </el-col>
                        <el-col :span="13">
                          <div class = "title">剩余停车位预警</div>
                        </el-col>
                        <el-col :span="24">
                            <el-row>
                              <el-col :span="10">
                                    <div class="chart5Text">
                                      <p>
                                          <span>剩余车位</span>
                                          <span>{{surplusCar}}个</span>
                                      </p>
                                      <p >
                                          <span></span>
                                          <span>车位占用率在</span>
                                          <span>70%</span>
                                          <span>以下</span>
                                      </p>
                                      <p>
                                          <span></span>
                                          <span>车位占用率在</span>
                                          <span>70%~85%</span>
                                          <span>以上</span>
                                      </p>
                                      <p>
                                          <span></span>
                                          <span>车位占用率在</span>
                                          <span>85%</span>
                                          <span>以上</span>
                                      </p>
                                  </div>
                                </el-col>
                                <el-col :span="14">
                                  <!-- 核心区域停车场 -->
                                    <div id = "chart2_1"  class = "chart iscolor1" style="height: 16vh;width:15vh;display:inline-block;"></div>
                                  <!-- 预约临时停车场 -->
                                    <div id = "chart2_2" class = "chart iscolor1" style="height: 16vh;width:15vh;display:inline-block;"></div>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { TMap } from '../TMap';
import 'font-awesome/css/font-awesome.min.css';
import axios from 'axios';
import http from '../utils/httpRequest';
import {config,xAxiss,yAxiss,grid,tooltip1,legend,dotHtml} from '../../static/js/config/chartConfig.js';
import {busLine} from '../../static/js/map/busLine.js';
import jq from 'jquery';
var echarts = require('echarts');
var chart1 = [{"tm":"一体机","nu":2000,"pro":500},{"tm":"一体机","nu":4000,"pro":500},{"tm":"电力设施","nu":2000,"pro":600},{"tm":"摄像头","nu":3000,"pro":100}];
export default {
    name:"earlyWarning",
    components: {

    },
  data(){
    return{
      isShow1:true,
      isShow2:false,
      isShow3:false,
      isShow4:false,
      isShow5:false,
      isShow6:true,
      busNum:"72",
      busLineNum:"103",
      carNum:"10",
      carLineNum:"20",
      isDisplay3:true,
      surplusCar:"28",
      axisTicklineWidth:'1',//仪表盘的axisTicklineWidth
      borderWidth:'5', //水波球 边框的宽度
      borderDistance:'5',//水波球 边框之间的距离
    }
  },
  mounted () {
    this.chart1_1_lef();
    this.chart1_2_lef();
    this.chart2();
    // this.dataConfig();
    this.chart2_1();
    this.chart2_2();
  },
  methods: {
    chart1_1_lef(){
      var that = this;
      var chart1_1 = echarts.init(document.getElementById('chart1_1'));
      var berderWidth = jq("#chart1_1").width()/13;
      var ajaxUrl = "/t81wrnexhtdev/personnelWarning";
        this.$http({
          url: that.$http.adornUrl(ajaxUrl),
          method: 'get',
        }).then(({data}) => {
          this.warningData = data.list[0];
          var value1 = this.warningData.TOTL_EXHT_RATE
          var option = {
            series: [{
              type: 'line',
              data: [220, 182, 191, 234, 290, 330, 310]
            }]
          };
          var myRate1 = 100;
          var option = {
            series: [{
              type: 'gauge',
              center: ['50%', '85%'], // 默认全局居中
              radius: '155%',
              splitNumber: 10, //刻度数量
              min: 0,
              max: 100,
              startAngle: 180,
              endAngle: 0,
              clockwise: true,
              axisLine: {
                show: true,
                lineStyle: {
                  width: this.axisTicklineWidth,
                  shadowBlur: 0,
                  color: [
                    [1, '#03B7C9']
                  ]
                }
              },
              axisTick: { //仪表盘轴线
                show: true,
                lineStyle: {
                  color: '#03B7C9',
                  width: this.axisTicklineWidth,
                },
                length: berderWidth*1.4,
                splitNumber: this.axisTicklineWidth*13
              },
              splitLine: {//刻度样式
                show: true,
                width: berderWidth,
                length: berderWidth*1.8,
                lineStyle: {
                  color: '#03B7C9',
                }
              },
              axisLabel: { //分隔线样式
                show: false,
              },
              pointer: { //仪表盘指针
                show: 0
              },
              detail: {
                show: false
              },
              data: [{
                name: "",
                value: myRate1
              }]
            },
              {
                type: 'gauge',
                startAngle: 180,
                endAngle: 0,
                center: ['50%', '85%'], // 默认全局居中
                radius: '153%',
                min: 0,
                max: 100,
                axisLine: {
                  show: false,
                  lineStyle: {
                    // width: this.axisTicklineWidth*15,
                    width: berderWidth,
                    shadowBlur: 0,
                    color: [
                      [0.3, new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [{
                          offset: 0,
                          color: '#52fcfc'
                        },
                          {
                            offset: 1,
                            color: '#00FFFF'
                          }
                        ]
                      )
                      ],
                      [0.5, new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [{
                          offset: 0,
                          color: '#00FFFF'
                        },
                          {
                            offset: 1,
                            color: '#FFCC00'
                          }
                        ]
                      )
                      ],
                      // FFCC00
                      [0.84, new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [{
                          offset: 0,
                          color: '#FFCC00'
                        },
                          {
                            offset: 1,
                            color: '#ee2228'
                          }
                        ]
                      )
                      ],
                      [1, new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [{
                          offset: 0,
                          color: '#ee2228'
                        },
                          {
                            offset: 1,
                            color: '#ee2228'
                          }
                        ]
                      )
                      ]
                    ]
                  }
                },
                axisTick: {
                  show: false,

                },
                splitLine: {
                  show: false,
                },
                axisLabel: {
                  show: false
                },
                pointer:{//指针长短
                  show: true,
                  width: berderWidth*0.3,
                  length:berderWidth*4,
                },
                detail: {
                  formatter:'{value}%',
                  offsetCenter: [0, '-50%'],       // x, y，单位px
                  textStyle: {
                    color: '#fff',
                    fontSize: config().fontSize*1.1,
                  }
                },
                itemStyle: {
                  normal: {
                    color: "#03B7C9",
                  }
                },
                title: { //标题
                  show: true,
                  offsetCenter: [0, "-20%"], // x, y，单位px
                  textStyle: {
                    color: "#fff",
                    fontSize: config().fontSize*0.8, //表盘上的标题文字大小
                  }
                },
                data: [{
                  value: 83.12,
                  name:"实载"
                }]
              }
            ]
          }
          chart1_1.setOption(option);
          window.onresize = chart1_1.resize;
      })
    },
    chart1_2_lef(){
      var that = this;
      var chart1_2 = echarts.init(document.getElementById('chart1_2'));
       var berderWidth = jq("#chart1_2").width()/13;
      var ajaxUrl = "/t81wrnexhtdev/personnelWarning";
      this.$http({
        url: that.$http.adornUrl(ajaxUrl),
        method: 'get',
      }).then(({data}) => {
        this.warningData = data.list[0];
        var value2 = this.warningData.COMN_EXHT_RATE;
        var option = {
          series: [{
            type: 'line',
            data: [220, 182, 191, 234, 290, 330, 310]
          }]
        };
        var myRate1 = 100;
        var option = {
            series: [{
              type: 'gauge',
              center: ['50%', '85%'], // 默认全局居中
              radius: '155%',
              splitNumber: 10, //刻度数量
              min: 0,
              max: 100,
              startAngle: 180,
              endAngle: 0,
              clockwise: true,
              axisLine: {
                show: true,
                lineStyle: {
                  width: this.axisTicklineWidth,
                  shadowBlur: 0,
                  color: [
                    [1, '#03B7C9']
                  ]
                }
              },
              axisTick: { //仪表盘轴线
                show: true,
                lineStyle: {
                  color: '#03B7C9',
                  width: this.axisTicklineWidth,
                },
                length: berderWidth*1.4,
                splitNumber: this.axisTicklineWidth*13
              },
              splitLine: {//刻度样式
                show: true,
                width: berderWidth,
                length: berderWidth*1.8,
                lineStyle: {
                  color: '#03B7C9',
                }
              },
              axisLabel: { //分隔线样式
                show: false,
              },
              pointer: { //仪表盘指针
                show: 0
              },
              detail: {
                show: false
              },
              data: [{
                name: "",
                value: myRate1
              }]
            },
              {
                type: 'gauge',
                startAngle: 180,
                endAngle: 0,
                center: ['50%', '85%'], // 默认全局居中
                radius: '153%',
                min: 0,
                max: 100,
                axisLine: {
                  show: false,
                  lineStyle: {
                    // width: this.axisTicklineWidth*15,
                    width: berderWidth,
                    shadowBlur: 0,
                    color: [
                      [0.3, new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [{
                          offset: 0,
                          color: '#52fcfc'
                        },
                          {
                            offset: 1,
                            color: '#00FFFF'
                          }
                        ]
                      )
                      ],
                      [0.5, new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [{
                          offset: 0,
                          color: '#00FFFF'
                        },
                          {
                            offset: 1,
                            color: '#FFCC00'
                          }
                        ]
                      )
                      ],
                      // FFCC00
                      [0.84, new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [{
                          offset: 0,
                          color: '#FFCC00'
                        },
                          {
                            offset: 1,
                            color: '#ee2228'
                          }
                        ]
                      )
                      ],
                      [1, new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [{
                          offset: 0,
                          color: '#ee2228'
                        },
                          {
                            offset: 1,
                            color: '#ee2228'
                          }
                        ]
                      )
                      ]
                    ]
                  }
                },
                axisTick: {
                  show: false,

                },
                splitLine: {
                  show: false,
                },
                axisLabel: {
                  show: false
                },
                pointer:{//指针长短
                  show: true,
                  width: berderWidth*0.3,
                  length:berderWidth*4,
                },
                detail: {
                  formatter:'{value}%',
                  offsetCenter: [0, '-50%'],       // x, y，单位px
                  textStyle: {
                    color: '#fff',
                    fontSize: config().fontSize*1.1,
                  }
                },
                itemStyle: {
                  normal: {
                    color: "#03B7C9",
                  }
                },
                title: { //标题
                  show: true,
                  offsetCenter: [0, "-20%"], // x, y，单位px
                  textStyle: {
                    color: "#fff",
                    fontSize: config().fontSize*0.8, //表盘上的标题文字大小
                  }
              },
              data: [{
                value: 72.89,
                name:"实载"
              }]
            }
          ]
        }
        chart1_2.setOption(option);
        window.onresize = chart1_2.resize;
      })  
    },
    chart2(){//立方体图表
       var chart2 = echarts.init(document.getElementById('chart2'));
       var xData = ["轨道","公交","出租","自驾","其他"];
       var barWidth = jq("#chart2").width()/xData.length*0.08;
       var data1 = [150, 200, 250,300,270,];
       var data2 = [70, 120, 160, 200,150];
       var option = {
            tooltip:  {
            trigger: "axis",
            axisPointer: config().axisPointer,
            textStyle: config().textStyle,
          },
            grid: grid(15),
            xAxis: xAxiss({'data':xData,'name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'',"splitLineColor":''}),
            yAxis: [yAxiss({'data':'','name':'','lineShow':false,'labelShow':true,'position':'','unit':'',"splitLineShow":true,"splitLineType":'',"splitLineColor":''}),],
            series: [{
                    name: '已入场',
                    type: 'bar',
                    barWidth: barWidth,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#fd7e31' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#ede370' // 100% 处的颜色
                            }], false),
                            barBorderRadius: [0, 0, 0, 180],
                        }
                    },
                    data: data2
                },
                {
                    name: '',
                    tooltip: {
                        show: false
                    },
                    type: 'bar',
                    barWidth: barWidth,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#ede370' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#fd7e31' // 100% 处的颜色
                            }], false),
                            barBorderRadius: [0, 0, 180, 0],
                          },
                    },
                    data: data2,
                    barGap: 0
                },
                {
                    name: '',
                    tooltip: {
                        show: false
                    },
                    type: 'pictorialBar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#fd7e31' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#ede370' // 100% 处的颜色
                            }], false),
                            shadowColor: 'rgb(0,0,0,0.1)',
                        }
                    },
                    symbol: 'rect',
                    symbolRotate: barWidth*17,
                    symbolSize: barWidth*1.45,
                    symbolOffset: [-barWidth, -barWidth*0.65],
                    symbolPosition: 'end',
                    data: data2,
                    z: 3
                },{
                    name: '预约参展',
                    type: 'bar',
                    barWidth: barWidth,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#6a4de7' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#3a7af5' // 100% 处的颜色
                            }], false),
                            barBorderRadius: [0, 0, 0, 180],
                        }
                    },
                    data: data1
                },
                {
                    name: '',
                    tooltip: {
                        show: false
                    },
                    type: 'bar',
                    barWidth: barWidth,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#3a7af5' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#6a4de7' // 100% 处的颜色
                            }], false),
                            barBorderRadius: [0, 0, 180, 0],
                        }
                    },
                    data: data1,
                    barGap: 0
                },
                {
                    name: '',
                    tooltip: {
                        show: false
                    },
                    type: 'pictorialBar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#6a4de7' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#3a7af5' // 100% 处的颜色
                            }], false),
                            shadowColor: 'rgb(0,0,0,0.1)',
                        }
                    },
                    symbol: 'rect',
                    symbolRotate: barWidth*17,
                    symbolSize: barWidth*1.45,
                    symbolOffset: [barWidth, -barWidth*0.65],
                    symbolPosition: 'end',
                    data: data1,
                    z: 3
                },
            ]
        };
        chart2.setOption(option);
        window.onresize = chart2.resize;
    },
    // dataConfig(){
    //   var blueColor = ["#3deffd","#0399fd","#52fcfc"];
    //   var yellowColor = ["#babe5c","#fbce00","#aaba71"];
    //   var redColor = ["#ba549b","#ff2661","#d44285"];
    //   var that = this;
    //   var ajaxUrl = "/t81wrnparkspc/parkingSpaces";
    //   this.$http({
    //     url: that.$http.adornUrl(ajaxUrl),
    //     method: 'get',
    //   }).then(({data}) => {
    //     this.wrn_Park_Spc = data.list[0];
    //     var isshowCor = this.wrn_Park_Spc.COR_REMN_PARK_SPC_RATE;
    //     var isshowTmp = this.wrn_Park_Spc.TMP_REMN_PARK_SPC_RATE;
    //     this.surplusCar = Number(this.wrn_Park_Spc.COR_REMN_PARK_SPC_QTY) + Number(this.wrn_Park_Spc.TMP_REMN_PARK_SPC_QTY);
        //核心区域停车场
        // if(isshowCor <= "70"){
        //   this.chart2_1(isshowCor,blueColor);
        //   document.getElementById("chart2_1").className = 'iscolor1';
        // }
        // else if(isshowCor >= "70" && isshowCor <= "85"){
        //   this.chart2_1(isshowCor,yellowColor);
        //   document.getElementById("chart2_1").className = 'iscolor2';
        // }
        // else if(isshowCor >= "85"){
        //   this.chart2_1(isshowCor,redColor);
        //   document.getElementById("chart2_1").className = 'iscolor3';
        // }
        // //预约临时停车场
        // if(isshowTmp <= "70"){
        //   this.chart2_2(isshowTmp,blueColor);
        //   document.getElementById("chart2_2").className = 'iscolor1';
        // }
        // else if(isshowTmp >= "70" && isshowTmp <= "85"){
        //   this.chart2_2(isshowTmp,yellowColor);
        //   document.getElementById("chart2_2").className = 'iscolor2';
        // }
        // else if(isshowTmp >= "85"){
        //   this.chart2_2(isshowTmp,redColor);
        //   document.getElementById("chart2_2").className = 'iscolor3';
        // }
      // })
    // },
    chart2_1(){//核心区域停车场
        var chart1 = echarts.init(document.getElementById('chart2_1'));
        // var value = Number(v)/100;
        var value =0.23;
        // console.log(value)
        var data = []
        data.push(value)
        data.push(value)
        data.push(value)
        var option = {
          title: {
            text: '核心区域停车场',
            textStyle: {
              color: '#fff',
              fontSize: config().fontSize*1.1,
            },
            left: 'center', // 定位
            bottom: '25%'
          },
          series: [{
            type: 'liquidFill',
            radius: '60%',
            center:['52.5%','50%'],
            data:[ 0.6*value, {
                value: 0.5*value,
                direction: 'left', //水波移动的方向，默认right,top 和bottom时，单条水波静止
                itemStyle: {
                  normal: { //正常样式
                    // color: color[0],
                    color: "#3deffd",
                    opacity: 0.6,
                  }
                },
              },
              {
                value: 0.4*value,
                itemStyle: {
                  normal: { //正常样式
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      // color: color[1] // 0% 处的颜色
                      color: "#0399fd" // 0% 处的颜色
                    }, {
                      offset: 1,
                      // color: color[2] // 100% 处的颜色
                      color: "#52fcfc" // 100% 处的颜色
                    }], false),
                  }
                },
              },
            ],
            outline: {
              show: false , //是否显示轮廓 
            },
            backgroundStyle: {
              borderWidth: -1,
              color: 'rgb(0,40,61,0.2)'
            },
            label: {
              normal: {
                  formatter: (value*100) + '%',
                  textStyle: {
                    fontSize: config().fontSize*1.3,
                    // color:color[1]
                    color:"#3deffd"
                  }
              }
            },
          }]
        }
        chart1.setOption(option)
        window.onresize = chart1.resize;
    },
    chart2_2(){//预约临时停车场
        var chart1 = echarts.init(document.getElementById('chart2_2'));
        // var value = Number(v)/100;
        var value =0.85;
        var data = [];
        data.push(value);
        data.push(value);
        data.push(value);
        var option = {
          title: {
            text: '预约临时停车场',
            textStyle: {
              color: '#fff',
              fontSize: config().fontSize*1.1,
            },
            left: 'center', // 定位
            bottom: '25%'
          },
          series: [{
            type: 'liquidFill',
            radius: '60%',
            center:['52.5%','50%'],
            data:[ 0.6*value, {
                value: 0.5*value,
                direction: 'left', //水波移动的方向，默认right,top 和bottom时，单条水波静止
                itemStyle: {
                  normal: { //正常样式 
                    // color: color[0],
                    color: "#babe5c",
                    opacity: 0.6,
                  }
                },
              },
              {
                value: 0.4*value,
                itemStyle: {
                  normal: { //正常样式
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        // color: color[1] // 0% 处的颜色
                        color: "#fbce00" // 0% 处的颜色
                    }, {
                        offset: 1,
                        // color: color[2] // 100% 处的颜色
                        color: "#aaba71" // 100% 处的颜色
                    }], false),
                  }
                },
              },
            ],
            outline: {
              show: false , //是否显示轮廓 布尔值
            },
            backgroundStyle: {
              borderWidth: -1,
              color: 'rgb(0,40,61,0.2)'
            },
            label: {
              normal: {
                formatter: (value*100) + '%',
                textStyle: {
                    fontSize: config().fontSize*1.3,
                    // color:color[1]
                    color:"#fbce00"
                }
              }
            },
          }]
        }
        chart1.setOption(option)
        window.onresize = chart1.resize;
    },
  },
   
}
</script>
<style lang="scss" scoped>
 #earlyWarning{
   width: 100%;
   height: 100vh;
   background:#081220;
  *{margin: 0;padding: 0;}
   #left,#right{
        position: absolute;
        z-index: 1;
        top:7vh;
        background: rgba(12,27,63,0.73);
   }
   .chart{
     height: 85.5%;
   }
    .chart_right{
      height: 28vh;
    }
    .chart1Text{
        font-size: 0.6vw;
        color: #AFB8D2;
        display: flex;
        margin-top: 2.5vh;
        padding: 0 0.5vw;
        justify-content: space-between;
        p{
            display: flex;
            align-items: center;
            justify-content: space-around;
             span:nth-child(2){
               display: inline-block;
               margin: 0.3vw;
             }
        }
        p:nth-child(1){
          span:nth-child(1){
              width: 0.6vw;
              height: 0.6vw;
              background:#3efdfd;
          }
          span:nth-child(3){
              color: #3efdfd;
          }
        }
        p:nth-child(2){
          span:nth-child(1){
              width: 0.6vw;
              height: 0.6vw;
              background:#fbce00;
          }
          span:nth-child(3){
              color: #fbce00;
          }
        }
        p:nth-child(3){
          span:nth-child(1){
              width: 0.6vw;
              height: 0.6vw;
              background:#ff2661;
          }
          span:nth-child(3){
              color: #ff2661;
          }
        }
    }
    .chart2Text{
      font-size: 0.6vw;
      color: #AFB8D2;
      display: flex;
      margin-top: 1vh;
      align-items: center;
      justify-content: space-between;
      p{
        display: flex;
        align-items: center;
      }
      p:nth-child(1){
          span:nth-child(1){
            display: inline-block;
            width: 0.6vw;
            height: 0.6vw;
            margin-right: 0.2vw;
            background:#ffaf24;
          }
        }
        p:nth-child(2){
             span:nth-child(1){
                display: inline-block;
                width: 0.6vw;
                height: 0.6vw;
                margin-right: 0.2vw;
                background:#4f66ff;
               
            }
        }
    }
    .chart5Text{
        width: 90%;
        font-size: 0.6vw;
        color: #AFB8D2;
        margin-left: 0.2vw;
        p{
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-top: 1.3vh;
        }
        p:nth-child(1){
            padding-bottom: 2vh;
            font-size: 0.7vw;
            span:nth-child(2){
              font-size: 0.7vw;
              color: #3efdfd;
              background-image: url('../../static/img/number.png');
              background-repeat: no-repeat;
              background-size: 100% 100%;
              padding: 0.2vw 0.8vw;
            }
        }
        p:nth-child(2){
             span:nth-child(1){
                width: 0.6vw;
                height: 0.6vw;
                background:#208efe;
            }
            span:nth-child(3){
                color: #208efe;
            }
        }
        p:nth-child(3){
             margin-left: 1.8%;
             span:nth-child(1){
                width: 0.6vw;
                height: 0.6vw;
                display: inline-block;
                margin-right: 0.2vw;
                background:#fbce00;
            }
            span:nth-child(3){
                color: #fbce00;
            }
        }
        p:nth-child(4){
             span:nth-child(1){
                width: 0.6vw;
                height: 0.6vw;
                background:#ff2661;
            }
            span:nth-child(3){
                color: #ff2661;
            }
        }
    }
    .deviationRate{//偏差率
      width: 80%;
      font-size: 0.6vw;
      color: #AFB8D2;
      margin-left:0.2vw;
      background-image: url('../../static/img/titleborder_l.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 0.1vw 0 0.1vw 0;
    }
    .peplTaotal{//普通观众
      margin-top: 1.5vw;
      margin-bottom: 1.5vw;
      font-size: 0.6vw;
      color: #AFB8D2;
      width: 45%;
      background-image: url('../../static/img/titleborder_l.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 0.2vw 0 0.3vw 0;
    }
    .loadBearing{//最大承载
      margin-top: 1.5vw;
      font-size: 0.6vw;
      color: #AFB8D2;
      span{
        background-image: url('../../static/img/numBg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 0.2vw 0.8vw;
      }
    }
    .curDate{
      margin-top:2.5vh;
      margin-left:0.5vh;
      font-size: 0.6vw;
      color: #AFB8D2;
      p{
        margin-top: 0.8vw;
        span{
          background-image: url('../../static/img/numBg.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          padding: 0.2vw 0.8vw;
        }
      }
      
    }
    .rateContentBox{
      margin-top: 1.3vw;
      padding: 0vw 0.5vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .rateContent{
        display: flex;
        align-items: center;
        font-size:0.6vw;
        color: #3f94ee;
        border: 1px solid #1042ae;
        padding: 0.5vw 0.5vw;
        img{
          width: 0.8vw;
          height:0.8vw;
        }
        span:nth-child(2){
          display: inline-block;
          margin: 0.5vw;
        }
        .colorGreen{
          color: #1cff9e;
        }
        .colorYellow{
          color: #e1ba0f;
        }
        .colorRed{
          color: #e6265f;
        }
      }
    }
    .iscolor1{
      background-image: url('../../static/img/blueBg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .iscolor2{
      background-image: url('../../static/img/yellowBg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .iscolor3{
      background-image: url('../../static/img/redBg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    #chart2_2{
      margin-left: 0.6vw;
    }
 }
</style>
